<!--
网络智检结果
-->
<template>
  <div style="margin-left: 14px">
    <div v-if="networkDiagnosisId != '' && networkDiagnosisId != '0'">
      <p>
        <rj-space>
          <span
            >{{ $t('exportPdf.configResult') }}:
            <span v-if="resultState == 'OK'" class="common-color-success">{{
              $t('exportPdf.pass')
            }}</span>
            <span v-else class="common-color-alarm">{{
              $t('exportPdf.risky')
            }}</span></span
          >
          <a-checkbox v-model="ignoreDiagnoseWarn" @change="setPdfData">
            {{ $t('exportPdf.hideRisk') }}
          </a-checkbox>
        </rj-space>
      </p>
      <rj-table
        bordered
        :data-source="totalDataSource"
        :columns="totalColumns"
        :rowKey="
          (record, index) => {
            return record.id;
          }
        "
        :pagination="false"
      >
        <template slot="resultState" slot-scope="text">
          <span class="common-color-success" v-if="text == 'OK'">{{
            $t('exportPdf.pass')
          }}</span>
          <span class="common-color-alarm" v-else>{{
            $t('exportPdf.risky')
          }}</span>
        </template>
      </rj-table>
    </div>
    <div class="smartchecknone" v-else>
      <i
        class="icon icon-offline font20 risk"
        style="margin-right: 8px; color: red"
      ></i
      >{{ $t('exportPdf.tips5')
      }}<a @click="startSmartCkeck">{{ $t('exportPdf.tips6') }}</a>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex';
import { requestHttp, maccApi } from '@utils/index';
import { RjTable } from '@components';
import { i18nRender } from '@/locales';

export default {
  name: 'smartCheckList',
  props: {
    networkDiagnosisId: String,
    ignoreDiagnoseWarn: Boolean,
  },
  components: {
    'rj-table': RjTable,
  },
  data() {
    return {
      totalColumns: [
        {
          title: i18nRender('exportPdf.checkType'),
          dataIndex: 'itemGroupName',
          key: 'itemGroupName',
        },
        {
          title: i18nRender('exportPdf.detail'),
          dataIndex: 'name',
          key: 'name',
        },

        {
          title: i18nRender('exportPdf.checkResult'),
          dataIndex: 'resultState',
          scopedSlots: { customRender: 'resultState' },
          width: '80px',
          key: 'resultState',
        },
      ],
      resultState: '',
      totalDataSource: [],
      isDeviceTotal: false,
      oldAllData: {},
    };
  },
  mounted() {},
  created() {
    this.initView();
  },
  methods: {
    initView() {
      this.getDiangoList();
    },
    /**
     * 获取网络智检详细结果
     */
    async getDiangoList() {
      if (!this.networkDiagnosisId) {
        return;
      }
      let api = `${maccApi.DIAGNOSIS_RESULT_LIST.replace(
        '{networkDiagnosisId}',
        this.networkDiagnosisId
      )}`;
      let ret = await requestHttp({
        api: api,
        method: 'GET',
      });
      if (ret.code == 0) {
        if (!ret || 0 != ret.code) {
          this.totalDataSource = [];
        } else {
          let resultList = ret.list;
          let resultState = 'OK';
          let newList = [];
          for (let i = 0; i < resultList.length; i++) {
            for (let j = 0; j < resultList[i].itemList.length; j++) {
              let itemGroupName = '';
              if (j == 0) {
                itemGroupName = resultList[i].itemGroupName;
              }
              if (
                resultList[i].itemList[j].resultState == 'RISK' ||
                resultList[i].itemList[j].resultState == 'PROBLEM'
              ) {
                //有风险项的数据
                resultState = 'RISK';
              }
              let obj = {
                resultState: resultList[i].itemList[j].resultState,
                name: resultList[i].itemList[j].name,
                itemGroupName: itemGroupName,
              };
              newList.push(obj);
            }
          }
          this.resultState = resultState;
          this.totalDataSource = newList;
        }
      }
    },
    setPdfData(e) {
      console.log(e);
      this.$emit('setIgnoreDiag', this.ignoreDiagnoseWarn);
    },
    startSmartCkeck() {
      // this.$router.push('smartcheck');
      this.$iframeMsg('GOTO_HASH', {
        hash: 'maintenance_project_diagnosis_menu',
      });
    },
  },
  watch: {
    networkDiagnosisId(val) {
      this.getDiangoList();
    },
  },
  computed: {
    ...mapState('Group', ['groupId']),
  },
};
</script>
<style lang="less" scoped>
h3 {
  font-size: 14px;
  font-weight: bold;
  margin-top: 12px;
  margin-bottom: 10px;
}
.font-size-20 {
  font-size: 20px;
}
.smartchecknone {
  background: #fff8ef;
  /* 功能色/Orange */

  border: 1px solid #f17a00;
  box-sizing: border-box;
  border-radius: 4px;
  padding: 10px;
}

.common-color-success {
  color: @onlineColor1;
}
.common-color-alarm {
  color: #f17a00;
}
</style>
